<!-- 当前工单及任务完成情况 -->
<template>
    <div class="leftPart ">
        <div class="title">
            <img class="title_icon icon_left" src="@/assets/images/dailyMaintenance/l_bt.png" alt="">
            <span class="title_text">当前工单及任务完成情况</span>
            <img class="title_icon icon_right" src="@/assets/images/dailyMaintenance/r_bt.png" alt="">
        </div>
        <div class="navBar">
            <div class="nav_item" :class="{ 'nav_active': navIndex == 0 }" @click="changeIndex(0)">近30日</div>
            <div class="nav_item" :class="{ 'nav_active': navIndex == 1 }" @click="changeIndex(1)">近3个月</div>
            <div class="nav_item" :class="{ 'nav_active': navIndex == 2 }" @click="changeIndex(2)">近1年</div>
        </div>
        <div class="status_item reportRepair">
            <div class="status_title">
                <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                <span>检修报修</span>
            </div>
            <pieChart :data="chartData.data"></pieChart>
        </div>
        <div class="status_item">
            <div class="status_title routineInspection">
                <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                <span class="status_text">
                    <span class="title_name">日常巡检</span>
                    <span class="title_num">100</span>
                    <span class="title_unit">个</span>
                </span>
            </div>
            <div class="progressBox">
                <el-progress type="circle" :percentage="54" color="#00E3FE" class="progress_01">
                    <template #default="{ percentage }">
                        <div class="percentage-value">{{ percentage }}%</div>
                        <div class="percentage-label">未巡检</div>
                    </template>
                </el-progress>
                <el-progress type="circle" :percentage="21" color="#00E486" class="progress_02">
                    <template #default="{ percentage }">
                        <div class="percentage-value">{{ percentage }}%</div>
                        <div class="percentage-label">未巡检</div>
                    </template>
                </el-progress>
                <el-progress type="circle" :percentage="25" color=" #FF5757" class="progress_03">
                    <template #default="{ percentage }">
                        <div class="percentage-value">{{ percentage }}%</div>
                        <div class="percentage-label">未巡检</div>
                    </template>
                </el-progress>
            </div>

        </div>
        <div class="status_item">
            <div class="status_title routineInspection">
                <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                <span class="status_text">
                    <span class="title_name">维护保养</span>
                    <span class="title_num">100</span>
                    <span class="title_unit">个</span>
                </span>
            </div>
            <div class="progressBox">
                <el-progress type="circle" :percentage="54" color="#00E3FE" class="progress_01">
                    <template #default="{ percentage }">
                        <div class="percentage-value">{{ percentage }}%</div>
                        <div class="percentage-label">待处理</div>
                    </template>
                </el-progress>
                <el-progress type="circle" :percentage="21" color="#00E486" class="progress_02">
                    <template #default="{ percentage }">
                        <div class="percentage-value">{{ percentage }}%</div>
                        <div class="percentage-label">已完成</div>
                    </template>
                </el-progress>
                <el-progress type="circle" :percentage="25" color=" #FF5757" class="progress_03">
                    <template #default="{ percentage }">
                        <div class="percentage-value">{{ percentage }}%</div>
                        <div class="percentage-label">逾期</div>
                    </template>
                </el-progress>
            </div>

        </div>
        <div class="title">
            <img class="title_icon icon_left" src="@/assets/images/dailyMaintenance/l_bt.png" alt="">
            <span class="title_text">工单趋势图</span>
            <img class="title_icon icon_right" src="@/assets/images/dailyMaintenance/r_bt.png" alt="">
        </div>
        <div class="navBar">
            <div class="nav_item" :class="{ 'nav_active': navIndex2 == 0 }" @click="changeIndex2(0)">近30日</div>
            <div class="nav_item" :class="{ 'nav_active': navIndex2 == 2 }" @click="changeIndex2(2)">近1年</div>
        </div>
        <lineChart :data="chartData"></lineChart>
    </div>
</template>

<script setup lang="ts">
import pieChart from "./pieChart.vue";
import lineChart from "./lineChart.vue";

let navIndex = ref(0);
let navIndex2 = ref(0);

//切换时间筛选
const changeIndex = (index: number) => {
    if (navIndex.value != index) {
        navIndex.value = index;
    }
}

//工单趋势图,切换时间筛选
const changeIndex2 = (index: number) => {
    if (navIndex2.value != index) {
        navIndex2.value = index;
    }
}

const chartData = reactive({
    data: [
        { value: '265', name: '未接受' },
        { value: "105", name: '处理中' },
        { value: "100", name: '已完成' },
        { value: "100", name: '已关闭' },
        { value: "49", name: '未分配' },
    ],
    data2: [
        { date: '2', value: 50 },
        { date: '4', value: 210 },
        { date: '6', value: 200 },
        { date: '8', value: 150 },
        { date: '10', value: 130 },
        { date: '12', value: 160 },
        { date: '14', value: 100 },
        { date: '16', value: 120 },
        { date: '18', value: 130 },
        { date: '20', value: 110 },
        { date: '22', value: 120 },
        { date: '24', value: 30 },
        { date: '26', value: 35 },
        { date: '28', value: 60 },
        { date: '30', value: 90 },
    ] as any,
    data3: [
        { date: '2', value: 70 },
        { date: '4', value: 230 },
        { date: '6', value: 280 },
        { date: '8', value: 110 },
        { date: '10', value: 230 },
        { date: '12', value: 150 },
        { date: '14', value: 190 },
        { date: '16', value: 110 },
        { date: '18', value: 100 },
        { date: '20', value: 210 },
        { date: '22', value: 320 },
        { date: '24', value: 230 },
        { date: '26', value: 135 },
        { date: '28', value: 160 },
        { date: '30', value: 190 },
    ] as any,
    data4: [
        { date: '2', value: 50 },
        { date: '4', value: 130 },
        { date: '6', value: 170 },
        { date: '8', value: 60 },
        { date: '10', value: 190 },
        { date: '12', value: 130 },
        { date: '14', value: 120 },
        { date: '16', value: 130 },
        { date: '18', value: 150 },
        { date: '20', value: 210 },
        { date: '22', value: 220 },
        { date: '24', value: 200 },
        { date: '26', value: 105 },
        { date: '28', value: 120 },
        { date: '30', value: 150 },
    ] as any,
})

</script>

<style lang="scss" scoped>
.leftPart {
    position: absolute;
    z-index: 999;
    background: url(@/assets/images/dailyMaintenance/l_bg.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(85);
    width: vw(421);
    height: vh(920);
    font-size: vh(14);
    color: #FFFFFF;
    padding: vh(23) vw(19);

    .title {
        display: flex;
        align-items: center;
        justify-content: center;

        .title_icon {
            height: vw(12);
            width: auto;
        }

        .title_text {
            margin-left: vw(11);
            margin-right: vw(11);
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: vw(18);
            color: #00E3FE;
            line-height: 1;
        }
    }

    .navBar {
        display: flex;
        margin-top: vh(23);
        margin-bottom: vh(22);

        .nav_item {
            height: vh(22);
            padding: 0 vw(10);
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(12);
            color: #94BCC4;
            line-height: vh(22);
            background: rgba(0, 227, 254, 0.2);
            border-radius: vw(4);
            margin-right: vw(10);
            display: flex;
            align-items: center;
            cursor: pointer;

            &.nav_active {
                border: 1px solid #00E3FE;
                color: #00D6FF;
            }
        }
    }

    .status_item {
        padding-bottom: vh(22);

        .status_title {
            // display: flex;
            // align-items: center;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: vh(14);
            color: #FFFFFF;
            line-height: 1;
            margin-bottom: vh(26);

            &.routineInspection {
                // margin-top: vh(16);
                margin-top: 0;
            }

            .historyData_icon {
                margin-right: vh(10);
                vertical-align: sub;
            }

            .title_name {
                line-height: vh(24);
            }

            .title_num {
                font-family: DIN;
                font-weight: bold;
                font-size: vh(24);
                color: #FFC600;
                margin-left: vw(17);
                margin-right: vw(7);
                line-height: vh(24);
                vertical-align: sub;
            }

            .title_unit {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(16);
                color: #FFC600;
                line-height: vh(24);
            }

        }

        .progressBox {
            display: flex;
            padding: 0 vw(14) 0 vw(12);
            justify-content: space-between;

            :deep(.el-progress) {

                .el-progress-circle {
                    width: vh(77) !important;
                    height: vh(77) !important;

                    .el-progress-circle__track {
                        stroke: #616D79;
                    }
                }

                .el-progress__text {

                    .percentage-value {
                        font-family: DIN;
                        font-weight: 400;
                        font-size: vh(16);
                        color: #00E3FE;
                        line-height: 1;
                        margin-bottom: vh(5);
                    }

                    .percentage-label {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: vh(12);
                        color: #E7E7E7;
                        line-height: 1;
                    }
                }

                &.progress_02 {
                    .el-progress__text {
                        .percentage-value {
                            color: #00E486;
                        }
                    }
                }

                &.progress_03 {
                    .el-progress__text {
                        .percentage-value {
                            color: #FF5757;
                        }
                    }
                }
            }
        }
        &.reportRepair {
            padding-bottom: vh(12);
            .status_title {
                margin-bottom: vh(16);
            }
        }
    }
}
</style>
